<template>
  <div
    id="hotTopic"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <div class="count" v-if="count != ''">
      共
      <span>{{ count }}</span>个收藏
    </div>
    <table class="table" v-show="TopicList.length != 0">
      <thead>
        <tr>
          <th>话题</th>
          <th>参与人数</th>
          <th>总播放量</th>
          <th>热门视频TOP3</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in TopicList" :key="'c' + index">
          <td>
            <div class="topic" @click="seeDetails(item.topicId, item)">
              <img :src="item.thumPic" />
              <el-tooltip
                effect="light"
                :content="item.title"
                :hide-after="2000"
                placement="top"
                popper-class="mytooltip"
              >
                <p>{{ item.title }}</p>
              </el-tooltip>
            </div>
          </td>
          <td>{{ format_num(item.useCount) }}</td>
          <td>{{ format_num(item.playCount) }}</td>
          <td>
            <div class="topVideo">
              <div class="videoImgBox" v-for="(item1, index1) in item.hotTop" :key="'top' + index1">
                <img
                  src="@/assets/wang/video/like.png"
                  class="likeImg"
                  v-if="item1.isCollect == 0"
                  @click="addVideoStar(item1.awemeId, item1)"
                />
                <img
                  src="@/assets/wang/video/liked.png"
                  class="likeImg"
                  v-if="item1.isCollect == 1"
                  @click="cancelVideoStar(item1.awemeId, item1)"
                />
                <img
                  src="@/assets/wang/video/play1.png"
                  class="playImg"
                  @click="playVideo(item1.url)"
                />
                <img :src="item1.thumPic" class="videoImg" />
                <div class="zanBox">
                  <img src="@/assets/wang/video/zan.png" />
                  <span>{{ format_num(item1.favoriteCount) }}</span>
                </div>
                <div class="userInfoMaskWl"></div>
              </div>
            </div>
          </td>
          <td>
            <div class="options">
              <el-tooltip
                class="item"
                effect="light"
                content="话题详情"
                placement="top"
                popper-class="mytooltip"
                :hide-after="2000"
              >
                <img src="@/assets/wang/video/more.png" @click="seeDetails(item.topicId, item)" />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                content="取消收藏"
                placement="top"
                popper-class="mytooltip"
                :hide-after="2000"
              >
                <img src="@/assets/wang/video/liked.png" alt @click="cancelStar(item.topicId)" />
              </el-tooltip>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div
      v-loading="loading"
      v-if="!(TopicList.length < (page - 1) * 20)"
      class="loading grayLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <p class="nothing" v-show="TopicList.length != 0 && TopicList.length < (page - 1) * 20">我是有底线的～</p>
    <div class="empty addTop" v-show="!loading && TopicList.length == 0">
      <img src="@/assets/liu/zw.png" />
      <p>您还未收藏任何内容哦~</p>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="topicDetails" :show-close="false" v-if="topicDetails">
      <div class="topicDetailsBox">
        <topicDetails
          :topicId="topicId"
          @changeTopicCollect="changeTopicCollect"
          @changeVideoCollect="changeVideoCollect"
        />
      </div>
      <img src="@/assets/wang/video/close.png" class="closeImg" @click="topicDetails = false" />
    </el-dialog>
  </div>
</template>

<script>
import topicDetails from '@/pages/wang/video/hotTopic/component/topicDetails';
export default {
  components: {
    topicDetails
  },
  data() {
    return {
      activeName: 'first',
      topicDetails: false,
      topicWords: '',
      TopicList: [],
      page: 1,
      busy: false,
      loading: true,
      updateTime: '',
      topicId: '',
      cancel01: null,
      cancel02: null,
      cancel03: null,
      cancel04: null,
      count: ''
    };
  },
  computed: {},
  watch: {},
  created() {
    let that = this;
    this.GetTopicList();
    this.$watch(
      'topicWords',
      that.debounce((newVal, oldVal) => {
        if (newVal == '') {
          that.page = 1;
          that.TopicList = [];
          that.GetTopicList();
        }
      }, 0)
    );
  },
  mounted() {},

  methods: {
    // 添加视频收藏
    addVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/InsertCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏视频
    cancelVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    GetTopicList() {
      let that = this;
      that.loading = true;
      that.busy = true;
      that.$axios
        .get(
          '/api/collection/GetTopicCollection',
          {
            params: {
              pageIndex: that.page,
              pageSize: 20
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.page += 1;
            that.TopicList = that.TopicList.concat(res.data.data);
            that.count = res.data.count;
            res.data.data.length < 20 ? (that.busy = true) : (that.busy = false);
          }
          that.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏话题
    cancelStar(id, index) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 4 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.TopicList.splice(index, 1);
            that.count--;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    loadMore() {
      this.GetTopicList();
    },
    toSearch() {
      if (this.topicWords != '') {
        this.page = 1;
        this.TopicList = [];
        this.GetTopicList();
      }
    },
    seeDetails(topicId, item) {
      this.topicId = topicId;
      this.topicItem = item;
      this.topicDetails = true;
    },
    playVideo(url) {
      window.open(url);
    },
    // 在详情中收藏了话题
    changeTopicCollect(isCollect) {
      // console.log('改变收藏')
      this.topicItem.isCollect = isCollect;
    },
    // 在详情中收藏了视频
    changeVideoCollect(isCollect, id) {
      // console.log('改变收藏视频')
      this.topicItem.hotTop.map(item => {
        if (item.awemeId == id) {
          item.isCollect = isCollect;
          console.log;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
#hotTopic {
  height: fit-content;
  min-height: 100vh;
  // overflow: auto;
  .addTop {
    margin-top: 150px;
  }
  .count {
    padding-top: 20px;
    color: #888;
    font-size: 14px;
    span {
      color: #fd7f2c;
      font-family: DINAlternate-Bold;
    }
  }
  table {
    background-color: #ffffff;
    width: 100%;
    margin-top: 18px;

    tbody {
      tr {
        height: 172px;

        td {
          text-align: center;
        }

        td:nth-child(1) {
          width: 28%;
        }

        td:nth-child(2),
        td:nth-child(3) {
          width: 16%;
          font-family: DINAlternate-Bold;
          color: #222222;
          font-size: 16px;
        }
        td:nth-child(4) {
          width: 25%;
        }

        td:nth-child(5) {
          width: 15%;
        }

        .topic {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;

          img {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            margin-left: 28px;
            object-fit: cover;
            border: 1px solid #e5e5e5;
          }

          p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            font-size: 16px;
            color: #222222;
            padding-left: 22px;
            font-weight: 600;
          }
        }

        .topVideo {
          width: 69%;
          min-width: 280px;
          margin: 0 auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .videoImgBox {
            width: 80px;
            height: 116px;
            border-radius: 4px;
            position: relative;
            margin-left: 20px;

            .likeImg {
              width: 20px;
              height: 20px;
              position: absolute;
              left: 7px;
              top: 7px;
              display: none;
              cursor: pointer;
              z-index: 2;
            }

            .playImg {
              width: 30px;
              height: 30px;
              position: absolute;
              left: 25px;
              top: 43px;
              display: none;
              cursor: pointer;
              z-index: 2;
            }

            .videoImg {
              width: 100%;
              height: 100%;
              border-radius: 4px;
            }

            .zanBox {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              z-index: 2;
              position: absolute;
              left: 0;
              bottom: 4px;

              img {
                width: 13px;
                height: 12px;
                margin-left: 7px;
              }

              span {
                font-size: 14px;
                color: #ffffff;
                padding-left: 6px;
                font-family: DINAlternate-Bold;
              }
            }
          }

          //   hover 显示收藏和播放
          .videoImgBox:hover {
            .likeImg {
              display: block !important;
            }

            .playImg {
              display: block !important;
            }
          }

          .videoImgBox:nth-child(1) {
            margin-left: 0 !important;
          }
        }

        .options {
          padding: 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 32px;
            height: 32px;
            cursor: pointer;
            outline: none !important;
          }

          img:nth-child(2) {
            margin-left: 16px;
          }
        }
      }
    }

    th:nth-child(1) {
      text-align: left;
      padding-left: 28px;
    }
  }

  .updateTime {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 31px;
    right: 21px;

    span:nth-child(1) {
      font-size: 14px;
      line-height: 30px;
      color: #888888;
    }

    span:nth-child(2) {
      font-family: DINAlternate-Bold;
      font-size: 16px;
      line-height: 30px;
      color: #1779ff;
      padding-left: 13px;
    }
  }

  .topicDetailsBox {
    background-color: #ffffff;
    border-radius: 4px;
    height: 85vh;
    overflow: auto;
  }

  .closeImg {
    cursor: pointer;
    position: absolute;
    width: 16px;
    height: 16px;
    right: 14px;
    top: 14px;
  }
}
</style>
